<template>
	<el-container>
		<el-header class="title" style="height: 40px">
			万事达-TMS客户端
			<el-button type="danger" plain size="mini">退出系统</el-button>
		</el-header>
		<el-main>
			<el-container>
				<el-header class="currTitle" style="height: 30px">
					回单管理-回单管理
				</el-header>
				<el-main>
					<!--搜索部分-->
					<el-row>
						<el-col :span="3">
							<el-select v-model="optionsValue" placeholder="请选择" size="small">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="4">
							<el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
						</el-col>
						<el-col :span="3" style="margin-left: 20px">
							<el-select v-model="timeValue" placeholder="请选择" size="small">
								<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="7">
							<el-date-picker v-model="pickerTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
							                start-placeholder="开始日期"
							                end-placeholder="结束日期" size="small"
							                style="width: 100%">
							</el-date-picker>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="2" style="margin-left: 20px">
							<el-button type="info" @click="search" size="small">搜索</el-button>
						</el-col>
					</el-row>

					<!--分类-->
					<el-row class="tabs">
						<el-badge :value="total" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="全部" name="total"></el-tab-pane>
							</el-tabs>
						</el-badge>
						<el-badge :value="confirmed" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="已确认" name="confirmed"></el-tab-pane>
							</el-tabs>
						</el-badge>
						<el-badge :value="unconfirmed" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="未确认" name="unconfirmed"></el-tab-pane>
							</el-tabs>
						</el-badge>
						<el-badge :value="unusual" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="异常" name="unusual"></el-tab-pane>
							</el-tabs>
						</el-badge>
					</el-row>

					<!--表格部分-->
					<el-table class="mytable" ref="multipleTable" :data="tableData" border size="small" fit
					          tooltip-effect="dark" style="width: 100%;"
					          :header-cell-style="{background:'rgb(220,220,220)',color:'black'}">
						<el-table-column label="操作" show-overflow-tooltip width="50px">
							<template slot-scope="scope">
								<el-button
										size="mini"
										@click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit"></el-button>
							</template>
						</el-table-column>
						<el-table-column prop="orderNO" label="订单号" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="transportNO" label="运单号" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="orderDate" label="下单日期" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="contractNO" label="合同编号" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="receivingParty" label="收货方" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="receiver" label="收货人" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="origin" label="始发地" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="destination" label="目的地" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="goods" label="货物" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="weight" label="重量kg" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="returnDate" label="回单时间" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="confirmation" label="确认状态" show-overflow-tooltip>
						</el-table-column>
					</el-table>

					<!--表格分页功能-->
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					               :current-page="currentPage" :page-sizes="[10, 15, 20]"
					               :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
					               :total="this.tableData.length">
					</el-pagination>

				</el-main>
			</el-container>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "Receipt",
	props: {
		msg: String,
	},
	data() {
		return {
			input: "",
			options: [
				{
					value: "contractNo",
					label: "合同编号",
				},
				{
					value: "orderNo",
					label: "订单号",
				},
				{
					value: "consignee",
					label: "收货人",
				},
				{
					value: "origin",
					label: "始发地",
				},
				{
					value: "destination",
					label: "目的地",
				},
				{
					value: "goods",
					label: "货名",
				},
			],
			optionsValue: "contractNo",
			timeOptions: [
				{
					value: "orderTime",
					label: "下单时间",
				},
				{
					value: "validity",
					label: "报价有效期",
				},
			],
			timeValue: "orderTime",
			pickerTime: "",
			activeTab: "total",
			total: 0,
			confirmed: 0,
			unconfirmed: 0,
			unusual: 0,
			currTab: 0,
			tableData: [],
			currentPage: 1,
			pageSize: 15,
			resData: []
		};
	},
	methods: {
		suitName() {
			// 适配前后端参数名
			let adaptationParam = {orderTime: [], validity: []}
			adaptationParam.contractNo = 'heTongHao';
			adaptationParam.orderNo = 'dingDanHao';
			adaptationParam.consignee = 'shouHuoRen';
			adaptationParam.origin = 'shiFaDi';
			adaptationParam.destination = 'muDiDi';
			adaptationParam.goods = 'huoMing';
			adaptationParam.orderTime[0] = 'xiaDanShiJianQiShi';
			adaptationParam.orderTime[1] = 'xiaDanShiJianJieShu';
			adaptationParam.validity[0] = 'baoJiaYouXiaoJieZhiRiQiQiShi';
			adaptationParam.validity[1] = 'baoJiaYouXiaoJieZhiRiQiJieShu';

			return adaptationParam;
		},
		getData(Param) {
			// 获取当前页面数据
			let that = this;
			that.$axios({
				url: '/api/kehu/huiDan/moHuChaXunHuiDan',
				method: 'post',
				data: {
					"limit": that.pageSize,
					"page": that.currentPage,
					"chaXunZhuangTai": that.currTab,
					[Param[that.optionsValue]]: that.input,
					[Param[that.timeValue][0]]: that.pickerTime[0],
					[Param[that.timeValue][1]]: that.pickerTime[1]
				}
			}).then(res => {
				that.resData = res.data.data.data;
				console.log(res.data.data);
				that.tableData = [];
				if (that.resData.length) {
					that.resData.forEach(function (v, i) {
						let currData = {};
						currData.orderNO = v.dingDan.dingDanHao;
						currData.transportNO = v.yunDanHao;
						currData.orderDate = v.dingDan.xiaDanShiJian;
						currData.contractNO = v.keHuHeTong.heTongHao;
						currData.receivingParty = v.dingDan.shouHuoFang;
						currData.receiver = v.dingDan.shouHuoRen;
						currData.origin = v.dingDan.shiFaDiXiangXiDiZhi;
						currData.destination = v.dingDan.muDiDiXiangXiDiZhi;
						currData.goods = v.huoWuXinXi[0].huoMing;
						currData.weight = v.huoWuXinXi[0].zongZhongLiang;
						currData.returnDate = v.dingDan.updateTime;
						if (v.dingDan.dingDanZhuangTai == 0) {
							currData.confirmation = '已确认';
						} else if (v.dingDan.dingDanZhuangTai == 1) {
							currData.confirmation = '未确认';
						} else if (v.dingDan.dingDanZhuangTai == 2) {
							currData.confirmation = '异常';
						}
						that.tableData.push(currData);
					})
					that.total = res.data.data['全部数量'];
					that.confirmed = res.data.data['已确认'];
					that.unconfirmed = res.data.data['未确认'];
					that.unusual = res.data.data['异常'];

				}
				console.log(that.tableData);

			}).catch(err => {
				console.log(err);
			})
		},
		search() {
			let Params = this.suitName();
			this.getData(Params);

		},
		changeTabs(tab, event) {
			if (this.activeTab === 'total') {
				this.currTab = 0;
			} else if (this.activeTab === 'confirmed') {
				this.currTab = 1;
			} else if (this.activeTab === 'unconfirmed') {
				this.currTab = 2;
			} else if (this.activeTab === 'unusual') {
				this.currTab = 3;
			}
			let Params = this.suitName();
			this.getData(Params);
		},
		handleSizeChange(val) {
			// 更换每页显示的条数
			this.pageSize = val;
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			// 改变当前页面的页码
			this.currentPage = val;
			console.log(`当前页: ${val}`);
		},
		handleEdit(index, row) {
			let that = this;
			console.log(row.transportNO);
			/*that.$axios({
				url: '/api/kehu/huiDan/ChaXunHuiDanById',
				method: 'post',
				// headers: {'content-type':'application/json'},
				data: {
					'yunDanHao': row.transportNO
				}
			}).then(res => {
				console.log(res);
				this.$router.push({path: '/client/ReturnConfirm'});
			}).catch(err => {
				console.log(err);
				this.$router.push({path: '/client/ReturnConfirm'});
			})*/
			this.$router.push({path: '/client/ReturnConfirm'});
		},
	},
	mounted() {
		let Params = this.suitName();
		this.getData(Params);
	},
};
</script>

<style>
.el-table td,
.el-table th {
	text-align: center !important;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
* {
	text-align: left;
	margin: 0;
	padding: 0;
}

.el-header.title {
	background-color: rgb(153, 169, 191);
	color: #333;
	margin-bottom: 5px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

main.el-main {
	padding: 0;
}

.el-header.currTitle {
	background-color: rgb(211, 220, 230);
	line-height: 30px;
	margin-bottom: 5px;
}

.mytable, .el-table.mytable .cell {
	line-height: 32px;
	font-size: 14px;
}

.tabs {
	margin: 5px 0 -10px;
}

.item {
	margin-top: 10px;
	margin-right: 50px;
}


</style>